<template>
	<div class="valuate-container">
		<div class="title-row">
			<span class="title-item">图片预览</span>
			<div class="iconfont icon-cancelquxiao" @click="close"></div>
		</div>
		<div @tap="showPic" class="img-wrap">
			<img class="img" :src="url" />
		</div>
		<div class="btn-wrap">
			<span class="cancle-btn" @click="close">取消</span>
			<span class="submit-btn" @click="onSubmit">确认</span>
		</div>
	</div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  data() {
    return {
      url: this.imageSrc,
    }
  },
  props: {
    imageSrc: {
      type: String,
      default: '',
    },
  },
  methods: {
    // 预览图片
    showPic() {
      ImagePreview([this.url])
    },
    onSubmit() {
      this.$emit('onPreview', true)
    },
    close() {
      this.$emit('onPreview', false)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/font/iconfont.scss';
.valuate-container {
  padding: 15px;
  font-size: 15px;
  color: #72819b;
  background-color: #fff;
  box-sizing: border-box;
}
.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icon-cancelquxiao {
    font-size: 15px;
    color: #acacac;
  }
}
.img-wrap {
  text-align: center;
  padding: 6px 4px;
  vertical-align: center;
  .img {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 500px;
  }
}

.btn-wrap {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
  .cancle-btn {
    width: 45px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    background-color: #f2f2f2;
    border-radius: 3px;
  }

  .submit-btn {
    width: 45px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-50deg, #3861fe 0%, #489bfe 100%);
    color: #fff;
    border-radius: 3px;
  }
}
</style>
